<template>
  <div>
    <el-container class="con">
      <el-header>Header</el-header>
      <el-container>
        <!-- 左侧导航 -->
        <el-aside width="200px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
            unique-opened
          >
            <!-- 首页 -->
            <el-menu-item index="/home">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <!-- 系统管理 -->
            <div v-for="item in navlist" :key="item.id">
              <el-submenu :index="item.id.toString()" v-if="item.children">
                <template slot="title">
                  <i class="el-icon-s-fold"></i>
                  <span>{{ item.title }}</span>
                </template>

                <el-menu-item
                  :index="item1.url.slice(1)"
                  v-for="item1 in item.children"
                  :key="item1.id"
                  >{{ item1.title }}</el-menu-item
                >
              </el-submenu>

              <el-menu-item
                v-else
                :index="'/index'+item.url"
                >{{ item.title }}</el-menu-item>
            </div>

            <!-- 商城管理 -->
            <!-- <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-shop"></i>
                <span>商城管理</span>
              </template>
              <el-menu-item index="cate">商品分类</el-menu-item>
              <el-menu-item index="specs">商品规格</el-menu-item>
              <el-menu-item index="goods">商品管理</el-menu-item>
              <el-menu-item index="vip">会员管理</el-menu-item>
              <el-menu-item index="banner">轮播图管理</el-menu-item>
              <el-menu-item index="seckill">秒杀管理</el-menu-item>
            </el-submenu> -->
          </el-menu>
        </el-aside>

        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 组件出口 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navlist: [],
    };
  },
  created() {},
  mounted() {
    this.navlist = JSON.parse(sessionStorage.getItem("userinfo")).menus;
 
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped lang='less'>
@import "../less/index.less";
.con {
  width: 100vw;
  height: 100vh;
}
.el-header {
  background: @header-color;
}
.el-aside {
  background: @primary2;
}
.el-breadcrumb {
  margin-bottom: 20px;
}
</style>
